import React, {useRef} from "react";
import {addBanner} from '../../api/banner'
const Com = ({history}) => {
  const fileRef = useRef()
  const linkRef = useRef()
  const altRef = useRef()
  const imgRef = useRef()
  const imgPutRef = useRef()

  const getFile = () => {
    const file = fileRef.current.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload=function () {
      imgRef.current.src = this.result
      imgPutRef.current.value = this.result
    }
  }

  const submitBanner = () => {
    const data = {
      link: linkRef.current.value,
      alt: altRef.current.value,
      img: imgPutRef.current.value
    }
    console.log(data)
    addBanner(data).then(res => {
      // history.push('/banner')
      history.goBack()
    })
  }

  return (
      <div>
        <input type="text" ref={linkRef} name='link' placeholder='链接'/> <br />
        <input type="text" ref={altRef} name='link' placeholder='描述'/> <br />
        <input type="file" ref={fileRef} onChange={getFile} /> <br />
        <input type="text" ref={imgPutRef} name=''/> <br />
        <img ref={imgRef} src="" alt=""/> <br />
        <button onClick={submitBanner}>提交</button>
      </div>
  )
}

export default Com
